<template>
  <a-card :bordered="false">
    <a-list :grid="{ gutter: 8, column: 1 }" :data-source="data">
      <a-list-item slot="renderItem" slot-scope="item, index">
        <a-card bordered
                style="background-color: #00BFFF"
                :title="item.hoistId"
                :headStyle="hstyle"
                :body-style='{padding:0}'
        >
          <div style="height: 300px;width:100%;margin-top: -301px;position: absolute;font-weight: bolder;font-size: 25px;border: #d2f1f0 solid 1px" class="deviceCss">
            <a-row>
              <a-col :span="6">
                <span style="background-color: #008080">【写入信息】</span>
              </a-col>
              <a-col :span="6">
                <span>[起始层]:{{ item.sourceFloor }}</span>
              </a-col>
              <a-col :span="6">
                <span>[起始工位]:{{ item.sourceDevice }}</span>
              </a-col>
              <a-col :span="6">
                <span>[目标层]:{{ item.targetFloor }}</span>
              </a-col>
              <a-col :span="6">
                <span>[目标工位]:{{ item.targetDevice }}</span>
              </a-col>
              <a-col :span="6">
                <span>[任务类型]:{{ item.taskType }}</span>
              </a-col>
              <a-col :span="6">
                <span>[任务号]:{{ item.taskNo }}</span>
              </a-col>
              <a-col :span="6">
                <span>[小车入提升机完成]:{{ item.carInFinish }}</span>
              </a-col>
              <a-col :span="6">
                <span>[小车出提升机完成]:{{ item.carOutFinish }}</span>
              </a-col>
            </a-row>
          </div>
          <div
            style="height: 300px;width:100%;margin-top: -600px;position: absolute;font-weight: bolder;font-size: 25px;border: #d2f1f0 solid 2px" class="deviceCss">
            <a-row>
              <a-col :span="6">
                <span style="background-color: #008080">【读取信息】</span>
              </a-col>
              <a-col :span="6">
                <span>[任务号]:{{ item.deviceNum }}</span>
              </a-col>
              <a-col :span="6">
                <span>[当前层]:{{ item.floor }}</span>
              </a-col>
              <a-col :span="6">
                <span v-if="item.autoStatus == 1">[状态]:停机未启动</span>
                <span v-else-if="item.autoStatus == 2">[状态]:联机自动</span>
                <span v-else-if="item.autoStatus == 3">[状态]:脱机自动</span>
                <span v-else-if="item.autoStatus == 4">[状态]:手动</span>
                <span v-else-if="item.autoStatus == 5">[状态]:故障</span>
                <span v-else-if="item.autoStatus == 6">[状态]:维修</span>
                <span v-else>[状态]:未知</span>
              </a-col>
              <a-col :span="6">
                <span v-if="item.workStatus == 1">[工作状态]:就绪</span>
                <span v-else-if="item.workStatus == 2">[工作状态]:放货中</span>
                <span v-else-if="item.workStatus == 3">[工作状态]:升降中</span>
                <span v-else>[工作状态]:未知</span>
              </a-col>
              <a-col :span="6">
                <span>[是否有货]:{{ item.haveStock == 1?"有":"无"}}</span>
              </a-col>
              <a-col :span="6">
                <span>[是否有小车]:{{ item.haveCar == 1?"有":"无"}}</span>
              </a-col>
              <a-col :span="6">
                <span>[是否准出入小车]:{{ item.accessCar == 1?"是":"否"}}</span>
              </a-col>
              <a-col :span="6">
                <span>[当前层死档信号]:{{ item.blocker == 1?"伸出":"缩回"}}</span>
              </a-col>
              <a-col :span="6">
                <span>[故障码]:{{ item.faultCode }}</span>
              </a-col>
              <a-col :span="6">
                <span>[是否锁定]:{{ item.locking == 1?"已锁定":"未锁定"}}</span>
              </a-col>
            </a-row>
          </div>
          <img
            slot="cover"
            alt="提升机信息"
            src="@assets/5.png"
            class="imgcss"
          />
          <template slot="actions" class="ant-card-actions">
            <a-switch :checked="item.auto" checked-children="自动" un-checked-children="手动" @click="changeStatus(item.hoistId)"/>
          </template>
        </a-card>
      </a-list-item>
    </a-list>
  </a-card>
</template>
<script>

import {getFileAccessHttpUrl, postAction} from "@api/manage";
import {JeecgListMixin} from "@/mixins/JeecgListMixin";
import {getAction} from '@/api/manage';

export default {
  name: "HoistDetailInfo",
  mixins: [JeecgListMixin],
  components: {
    getFileAccessHttpUrl,
  },
  data() {
    return {
      data: [],
      hstyle: {"font-size": "20px", "font-weight": "bolder", "color": "#4B0082", "text-align": "center"},
      url: {
        list: "/wcs/wcsDeviceInfo/devicePlcInfo",
        autoOneUrl: "/wcs/wcsDeviceInfo/changeDeviceByCode",
      },
    };
  },
  created() {
    //定时获取工位数据
    this.timerStackerInfo();
    this.initData();
  },
  destroyed() {
    // 在页面销毁后，清除计时器
    this.clear();
  },
  methods: {
    timerStackerInfo() {
      // 计时器正在进行中，退出函数
      if (this.intervalId != null) {
        return;
      }
      // 计时器为空，操作
      this.intervalId = setInterval(() => {
        this.initData();
      }, 2000);
    },
    // 停止定时器
    clear() {
      clearInterval(this.intervalId); //清除计时器
      this.intervalId = null; //设置为null
    },
    initData() {
      this.loadData();
    },
    changeStatus(deviceCode){
      let params = new URLSearchParams();
      params.append('deviceCode', deviceCode);
      postAction(this.url.autoOneUrl,params).then((res)=>{
        if (res.success) {
          this.$message.success("操作成功!");
        }else{
          this.$message.error(res.message);
        }
        this.loadData();
      })
    },
    loadData() {
      getAction(this.url.list, {deviceCode: this.$route.query.deviceCode}).then((res) => {
        if (res.success) {
          this.data = res.result;
        }
      })
    },
  }
};
</script>
<style>
.imgcss {
  height: 500px;
  margin-top: 50px;
  margin-bottom: 50px;
  margin-left: 50px;
  filter: blur(20px);
  -webkit-filter: blur(20px);
  -ms-filter: blur(20px);
}
.deviceCss span{
  color: #F0FFFF;
}
</style>